<!-- 物资采购详情 purchaseDetails -->
<template>
  <div class="container-purchaseDetails">
    <van-nav-bar title="物资采购详情" left-arrow border @click-left="onClickLeft" @click-right="onClickRight">
      <van-icon name="delete" slot="right" v-if="isDelete" />
    </van-nav-bar>
    <div class="content">
      <van-cell-group>
        <div class="purchaseDetails-type flex-between item-s">
          <div class="purchaseDetails-type-l flex">
            <div class="purchaseDetails-type-l-name text-font-have">采购批次：</div>
            <div
              class="purchaseDetails-type-l-v"
              :class="[data.Code?'text-font-have':'text-font-none']"
            >{{data.Code}}</div>
          </div>
        </div>

        <div class="purchaseDetails-type flex-between item-s">
          <div class="purchaseDetails-type-l flex">
            <div class="purchaseDetails-type-l-name text-font-have">申请人：</div>
            <div
              class="purchaseDetails-type-l-v"
              :class="[data.ApplyPersonName?'text-font-have':'text-font-none']"
            >{{data.ApplyPersonName}}</div>
          </div>
        </div>

        <div class="purchaseDetails-type flex-between item-s">
          <div class="purchaseDetails-type-l flex">
            <div class="purchaseDetails-type-l-name text-font-have">发起时间：</div>
            <div
              class="purchaseDetails-type-l-v"
              :class="[data.dCreateTime?'text-font-have':'text-font-none']"
            >{{data.dCreateTime}}</div>
          </div>
        </div>

        <div class="purchaseDetails-type flex-between item-s">
          <div class="purchaseDetails-type-l flex">
            <div class="purchaseDetails-type-l-name text-font-have">需用时间：</div>
            <div
              class="purchaseDetails-type-l-v"
              :class="[data.DemandTime?'text-font-have':'text-font-none']"
            >{{data.DemandTime}}</div>
          </div>
        </div>  
      </van-cell-group>

      <div style="height:19px"></div>
      <div class="materials_table">
        <el-table
          :data="data.listItems"
          :header-cell-style="{'background-color':'#5A92FF','color':'#ffffff'}"
          max-height="610"
        >
          <el-table-column label="物资名称" align="center" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.ResourseName+' '+scope.row.Spec }}</template>
          </el-table-column>
          <el-table-column label="施工预算量" align="center" show-overflow-tooltip>
            <template slot-scope="scope">{{Number(scope.row.AdjustBOQ).toFixed(2)}}{{scope.row.Unit}}</template>
          </el-table-column>
          <el-table-column label="已采购量" align="center" show-overflow-tooltip>
            <template slot-scope="scope"> {{Number(scope.row.PurchaseNum).toFixed(2)}}{{scope.row.Unit}}</template>
          </el-table-column>
          <el-table-column label="本次采购量" align="center" show-overflow-tooltip>
            <template slot-scope="scope">{{Number(scope.row.ThisPurchaseNum).toFixed(2)}}{{scope.row.Unit}}</template>
          </el-table-column>
        </el-table>
      </div>

      <div class="project-title flex">工作流程</div>

      <div class="flow-content">
        <div
          class="flow-content-item"
          :style="index==0?'padding-top:0px':''"
          v-for="(item,index) in data.listFlow"
          :key="index"
        >
          <div
            class="flow-content-item-l flex-row"
            :class="[active >= index?'action-b':'action-a']"
          >
            {{index+1}}
            <div
              class="line"
              :class="[(active > index || (isMe && active == index)) && index != 0 ? 'line-b':'line-a']"
              v-if="index !== data.listFlow.length-1"
            ></div>
          </div>

          <div class="flow-content-item-c">
            <div class="flow-content-item-c-w flex">
              <div class="flow-content-item-c-l flex-row flow-content-item-border">
                {{item.PersonName}}
              </div>
              <div class="flow-content-item-c-l flex-row flow-content-item-border" style="flex: 4;">{{item.OrgName}}</div>
              <div class="flow-content-item-c-l flex-row">{{item.DeptName}}</div>
            </div>
            <div class="flow-content-item-c-triangle">
              <div class="flow-content-item-c-triangle-b"></div>
            </div>
            <div class="flow-content-item-c-pic flex-row" v-if="((active > index || WorkStatus== 4) && index !== 0) || ((WorkStatus == 3)&& isMe && active == index)">
              <template v-if="(active > index || WorkStatus== 4) && index !== 0">
                <img v-if="item.listAuthPhoto.length" :src="fileUrl+item.listAuthPhoto[0].Url">  <!--  :src="'http://47.112.21.206:8006'+item.listAuthPhoto" -->
                <div v-else>暂无认证</div>
              </template>
              <template v-else-if="(WorkStatus == 3)&& isMe && active == index">  <!-- v-else-if="(WorkStatus == 3 || WorkStatus == 0) -->
                
                <div class="pic-warp flex-row" @click="show_actionsheet = true" v-if="photoList.length === 0" v-loading="uploading">
                  <img src="./user_assets/imgs/up-proof.png">
                </div>
                <img v-else :src="fileUrl + item.smallPhotoURL" v-for="(item,index) in photoList" :key="index" @click="onRemove(index)">
              </template>
            </div>
          </div>

          <div class="flow-content-item-r"></div>
        </div>
      </div>

      <div class="btn-warp" v-if="isMe">
        <div class="btn-check" v-if="WorkStatus == 0">
          <van-button
            style="background: rgba(229, 75, 75, 1);"
            square
            type="primary"
            block
            @click="onReceive(2)"
          >拒收</van-button>
          <van-button
            style="background: rgba(90,147,255,1);"
            square
            type="primary"
            block
            @click="onReceive(1)"
          >接收</van-button>
        </div>
        <van-button
          class="btn"
          square
          type="primary"
          block
          @click="onPrimary"
          v-if="WorkStatus == 3"
        >确认审核</van-button>
      </div>

      <!-- <div class="btn-warp" v-if="isMe">
        <div class="btn-check" v-if="WorkStatus == 3">
          <van-button
            style="background: rgba(229, 75, 75, 1);"
            square
            type="primary"
            block
            @click="onReceive(2)"
          >拒收</van-button>
          <van-button
            style="background: rgba(90,147,255,1);"
            square
            type="primary"
            block
            @click="onReceive(1)"
          >接收</van-button>
        </div>
        <van-button
          class="btn"
          square
          type="primary"
          block
          @click="onPrimary"
          v-if="WorkStatus == 0"
        >确认完成</van-button>
      </div> -->
    </div>

    <!-- 拍照或上传照片 -->
    <van-actionsheet
      v-model="show_actionsheet"
      cancel-text="取消"
      @select="onSelect"
      @cancel="show_actionsheet = false"
      class="my-actionsheet">
      <van-uploader capture="camera" :after-read="afterRead" accept="image/*" :max-size="8388608" @oversize="oversize" class="actionsheet-uploader">
        拍照
      </van-uploader>
      <van-uploader :after-read="afterRead" accept="image/*" :max-size="8388608" @oversize="oversize" class="actionsheet-uploader">
        从手机相册选择
      </van-uploader>
    </van-actionsheet>
  </div>
</template>

<script type='textecmascript-6'>
import {
  UploadImages,
  RemoveMyPublish
} from "@/api/api.js";
import {
  getPurchaseListDetil,
  purchaseCheck,
  // purchasePutaway
} from "../../assets/js/scopeManage.js";
export default {
  data() {
    return {
      show_actionsheet: false,  //上拉菜单是否显示
      popupShow: false,  //弹出层是否显示
      pickerLoading: false,  //是否显示加载状态
      pickerTitle: "",  //顶部栏标题
      value_key: "",  //选项对象中，文字对应的 key
      columns: [],  //对象数组，配置每一列显示的数据
      loadingBtm: false,  //提交按钮是否显示为加载状态
      uploading: false,  //上传状态

      active: 0,
      isMe: false,
      isDelete: false,
      WorkStatus: 4, //整体状态  0 待接收  3进行中  4完成  
      userID: localStorage.getItem("userId"), //用户ID
      projectid: localStorage.getItem("projectid"),
      data: [],
      par: {
        Priority: "",
        OrgId: "",
        DepId: "",
        Person: "",
        Status: 1,
        ID: "",
        WorkFlowId: ""
      },
      photoList: [], //现场照片
      dialogImageUrl2: "", //上传凭证
      dialogVisible2: false, //上传凭证图片列表
      fileUrl: '',  //图片资源路径
      routerActive: null
    };
  },
  created() {
    // 获取详情
    this.getDetil();
    this.fileUrl = config.fileUrl
    this.routerActive = this.$route.query.active
  },
  methods: {
    // 获取详情
    getDetil() {
      getPurchaseListDetil(
        {
          ID: this.$route.query.id
        },
        res => {
          if (res.StatusCode == 200) {
            // 待接收 进行中 完成
            this.active = 0;
            res.Result.dCreateTime = res.Result.dCreateTime
              ? require("moment")(res.Result.dCreateTime).format("YYYY/MM/DD")
              : "/";
            res.Result.DemandTime = res.Result.DemandTime
              ? require("moment")(res.Result.DemandTime).format("YYYY/MM/DD")
              : "/";
            res.Result.listFlow.forEach((element, index) => {
              if (this.userID == element.Person) {
                  this.isDelete = true;
              }
              if (
                this.active == "" &&
                element.ID == res.Result.CurrentStepIndex
              ) {
                this.active = index;
                this.WorkStatus = element.Status;
                if (this.userID == element.Person) {
                  this.isMe = true;
                } else {
                  this.isMe = false;
                }
                this.par = {
                  Priority: element.Priority,
                  OrgId: element.OrgId,
                  DepId: element.DepId,
                  Person: element.Person,
                  ID: element.ID,
                  MasterID: res.Result.ID
                };
              }
            });
            this.data = res.Result;
            console.log("isMe", this.isMe, "WorkStatus", this.WorkStatus);
            console.log(this.data)
          }
        }
      );
    },

    // 返回上一页
    onClickLeft() {
      this.$router.push({path: '/rangeManagement',query:{active:this.routerActive}});
    },

    // 确认审核
    onPrimary() {
      let par = Object.assign(this.par, {
        listAuthPhoto: this.photoList,
        Status: 4
      });
      purchaseCheck(this, par);
    },

    // 接收/拒收
    onReceive(flag) {
      // 接收
      let par = "";
      if (flag == 1) {
        par = Object.assign(this.par, {
          listAuthPhoto: this.photoList,
          Status: 3
        });
      } else {
        par = Object.assign(this.par, {
          listAuthPhoto: this.photoList,
          Status: 2
        });
      }
      purchaseCheck(this, par);
    },
    /**
     * @name 选中选项时触发，禁用或加载状态下不会触发
     * @param {Object} item 选项对应的对象
     * @param {Number} index 选择对应的索引
     */
    onSelect(item) {
      this.show_actionsheet = false;
    },
    /**
     * @name 读取完成后的回调函数
     * @param {Object} file 文件解析后的 file 对象
     * @param {Object} detail 额外信息，包含 name 字段
     */
    afterRead(file, detail) {
      console.log("==afterRead==", file, detail)
      this.show_actionsheet = false;
      this.uploading = true;
      let params = [
        {
          key: "files",
          value: file.file
        }
      ];

      this.Request(UploadImages(params)).then(res => {
        if(res.StatusCode === 200){
          if(res.Detiel.length > 0){
            this.photoList.push({
              URL: res.Detiel[0].URL, //文件地址
              smallPhotoURL: res.Detiel[0].smallPhotoURL, //如果存在小图则返回小图地址
            });
          }else{
            this.$toast({
              type: "fail",
              message: res.message ? res.message : "图片上传失败",
              className: "my-toast"
            });
          }
        }else{
          this.$toast({type: 'fail', message: res.Message, className: "my-toast"});
        }
        this.uploading = false;
      })
    },
    /**
     * @name 文件大小超过限制时触发
     * @param {Object} file 文件解析后的 file 对象
     */
    oversize(file){
      this.$toast({
        message: "文件大小不要超过1M",
        className: "my-toast"
      });
    },
    /**
     * @name 移除照片
     * @param {} index 照片索引
     */
    onRemove(index) {
      this.$dialog.confirm({
       title: '删除提示！',
       message: '确认删除吗？',
       className: 'my-dialog'
     }).then(() => {
       this.photoList.splice(index, 1)
     }).catch(() =>{
       // on cancel
     })
    },
    /**
     * 删除操作
     * @param {integer} type 类型：1.变更 2.采购 3.沟通 4.风险
     * @param {integer} ID
     */
    onClickRight(){
      this.$dialog.confirm({
        title: '',
        message: '是否确定删除？'
      }).then(() => {
        this.Request(RemoveMyPublish({ID: Number(this.$route.query.id), type: 2})).then(data => {
          if (data.StatusCode === 200) {
            this.$toast({
              type: 'success',
              message: '删除成功！',
              className: "my-toast"
            })
            this.$router.push({path: '/rangeManagement',query:{active:this.routerActive}});
          }else{
            this.$toast({
              type: 'fail',
              message: data.message ? data.message : '后台异常',
              className: "my-toast"
            })
          }
        })
      })
    },
    // 上传照片
    upLoadImg() {
      console.log("upload");
    }
  }
};
</script>
<style>
@import "~@/assets/css/resetVant.css";
.container-purchaseDetails .actionsheet-uploader{
  height: 80px;
  line-height: 80px;
  display: block;
  text-align: center;
  font-size: 32px;
}
</style>

<style scope>
.container-purchaseDetails {
  width: 100vw;
  height: 100vh;
}
.content {
  height: calc(100vh - 90px);
  width: 100vw;
  overflow-y: auto;
}
.content .el-table__empty-text {
  font-size: 15px;
}
.container-purchaseDetails .p15 .van-cell .van-cell__title {
  max-width: 1.7rem;
}
.btn-check {
  display: flex;
  justify-content: space-between;
}
.btn-check button {
  width: 330px;
  height: 44px;
  border-radius: 4px;
}

/* 表格样式更改 */
.container-purchaseDetails .materials_table .el-table .cell {
  height: 0.78rem;
  line-height: 0.78rem;
  font-size: 30px;
}
.container-purchaseDetails .materials_table .el-table .table_input {
  border: 0.04rem solid #eeeeee;
}
.container-purchaseDetails .materials_table_largin .el-table .cell {
  height: 0.78rem;
  line-height: 0.78rem;
  font-size: 30px;
}
.container-purchaseDetails .materials_table_largin .el-table .table_input {
  border: 0.04rem solid #eeeeee;
}
.container-purchaseDetails .materials_table_largin {
  width: 100%;
  overflow: scroll;
}
</style>

<style lang='stylus' scoped rel='stylesheet/stylus'>
@import './user_assets/base.css';

.mt20 {
  margin-top: 0.27rem;
}

.container-purchaseDetails {
  width: 100%;
  height: 100%;
  background: rgba(246, 248, 250, 1);

  .m20 {
    margin: 0 0.32rem;
  }

  .p15 {
    padding: 0.4rem 0.32rem !important;
  }

  .btn-warp {
    padding: 0.4rem 0.32rem;
    background: rgba(246, 248, 250, 1);
  }

  .group-warp {
    padding: 0 0.32rem;

    .item-s-b {
      height: 1.18rem;
      line-height: 1.18rem;
      font-size: 30px;
      font-family: SourceHanSansCN-Regular;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      border-bottom: 0.017rem solid #E5E5E5;
    }
  }

  .content {
    .flow-content {
      padding: 10px 0.32rem;
      background: rgba(246, 248, 250, 1);

      .flow-content-item {
        padding-top: 0.4rem;
        display: flex;

        .action-a {
          background: rgba(221, 221, 221, 1);
        }

        .action-b {
          background: rgba(90, 147, 255, 1);
        }

        .flow-content-item-l {
          width: 0.53rem;
          height: 0.53rem;
          border-radius: 50%;
          font-size: 30px;
          font-family: SourceHanSansCN-Medium;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          position: relative;
          margin-right: 0.55rem;
          margin-top: 0.33rem;

          .line {
            position: absolute;
            width: 0.05rem;
            background-color: #979797;
            top: 0.64rem;
            left: 0.23rem;
          }

          .line-a {
            height: 0.83rem;
          }

          .line-b {
            height: 4.5rem;
          }
        }

        .flow-content-item-c {
          flex: 1;
          font-size: 30px;
          font-family: SourceHanSansCN-Medium;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 0.0133rem 0.11rem 0px rgba(220, 226, 237, 1);
          border-radius: 0.0532rem;
          position: relative;

          .flow-content-item-c-w {
            height: 1.18rem;
          }

          .flow-content-item-c-pic {
            padding-bottom: 0.27rem;

            .pic-warp {
              width: 6.69rem;
              height: 3.86rem;
              background: rgba(238, 238, 238, 1);

              img {
                width: 0.67rem;
                height: 0.67rem;
                display: block;
              }

            }

            img {
              width: 6.69rem;
              height: 3.86rem;
              display: block;
            }
            >div {
              width: 6.69rem;
              height: 3.86rem;
              text-align: center;
              line-height: 3.86rem;
            }
          }

          .flow-content-item-c-triangle {
            top: 0;
            left: -0.3rem;
            position: absolute;
            height: 1.18rem;
            width: 0.3rem;
            overflow: hidden;

            .flow-content-item-c-triangle-b {
              position: absolute;
              transform: rotate(45deg) !important;
              -ms-transform: rotate(45deg) !important;
              -moz-transform: rotate(45deg) !important;
              -webkit-transform: rotate(45deg) !important;
              -o-transform: rotate(45deg) !important;
              background: rgba(255, 255, 255, 1);
              box-shadow: 0px 1px 4px 0px rgba(220, 226, 237, 1);
              height: 0.4rem;
              width: 0.4rem;
              top: 0.39rem;
              left: 0.15rem;
            }
          }

          .flow-content-item-c-l {
            flex: 1.4;
          }

          .flow-content-item-border {
            border-right: 0.03rem dashed #979797;
          }
        }

        // .flow-content-item-r {
        //   margin-left: 1.06rem;
        // }
      }
    }

    .van-cell {
      padding: 0;
    }

    .uploader {
      background-color: rgba(246, 248, 250, 1);
      padding: 0 0.32rem;

      .van-uploader {
        width: 2.66rem;
        height: 2.66rem;
        background: rgba(255, 255, 255, 1);
        border-radius: 0.11rem;
        border: 0.027rem solid rgba(189, 193, 198, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.266rem;

        img {
          width: 2.66rem;
          height: 2.66rem;
          display: block;
        }
      }

      .uploader-tip {
        font-size: 26px;
        font-family: SourceHanSansCN-Regular;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        align-self: flex-end;
        margin-left: 0.16rem;
      }
    }

    .purchaseDetails-type-arrow img {
      width: 0.24rem;
      height: 0.43rem;
      display: block;
    }

    .flow-work {
      font-size: 26px;
      font-family: SourceHanSansCN-Regular;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      height: 2.13rem;
      background: rgba(255, 255, 255, 1);
      padding: 0 0.32rem;

      img {
        width: 0.8rem;
        height: 0.76rem;
        display: block;
        margin-bottom: 0.16rem;
      }
    }

    .van-button--primary {
      height: 1.18rem;
      background: rgba(90, 147, 255, 1);
      border-radius: 0.15rem;
      font-size: 30px;
      font-family: SourceHanSansCN-Medium;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }

    .item-s {
      height: 1.18rem;
      line-height: 1.18rem;
      font-size: 30px;
      font-family: SourceHanSansCN-Regular;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      border-bottom: 0.017rem solid #E5E5E5;
      margin: 0 0.32rem;
    }

    .project-title {
      font-size: 30px;
      font-family: SourceHanSansCN-Medium;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      height: 1.18rem;
      padding: 0 0.32rem;
      background-color: rgba(246, 248, 250, 1);
    }

    .project-title-r {
      height: 1.18rem;
      font-size: 30px;
      font-family: SourceHanSansCN-Regular;
      font-weight: 400;
      color: rgba(90, 146, 255, 1);
      line-height: 1.18rem;
    }

    .project-content {
      background-color: #fff;
    }
  }

  .text-font-have {
    font-size: 30px;
    font-family: SourceHanSansCN-Regular;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }

  .text-font-none {
    font-size: 30px;
    font-family: SourceHanSansCN-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }

  .van-popup .van-actionsheet__item {
    height: 1.18rem !important;
    line-height: 1.18rem !important;
    font-size: 30px;
  }
}
</style>
<style>
.materials_table .is-scrolling-none {
    max-height: 500px !important;
}
.container-purchaseDetails .van-nav-bar .van-icon{
  padding-right:20px;
}
</style>
